const allSingers = new Vue({
    el:"#all-singers",
    data:{
        singerData:[
            { text: "全部", val: -1 },
            { text: "华语", val: 7 },
            { text: "欧美", val: 96 },
            { text: "日本", val: 8 },
            { text: "韩国", val: 16 },
            { text: "其他", val: 0 },
        ],
        singerArr: [],
        page: 1,
        size: 5,
        butVal:"-1"
    },
    created:
        function(){
            fetch(`https://koo-music.vercel.app/artist/list?area=-1&limit=${this.size}`).then(res=>res.json())
             .then(res=>{
                 this.singerArr = res.artists

             })
        },
    methods:{
        async filter(e){
            this.butVal = e
            this.page = 1
            const {artists} = await fetch(`https://koo-music.vercel.app/artist/list?area=${e}&limit=${this.size}`).then(res => res.json())
            this.singerArr = artists
        },
        async loadMore() {
            this.page++
            console.log((this.page-1) * this.size)
            const { artists } = await fetch(`https://koo-music.vercel.app/artist/list?area=${this.butVal}&limit=${this.size}&offset=${(this.page-1) * this.size}`).then(res => res.json())
            this.singerArr = [...this.singerArr, ...artists]
        }
    }
})